﻿<!DOCTYPE html>
<html>
<head>
    <!-- Meta-Information -->
    <title>Zawya Admin Panel</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Vendor: Bootstrap 4 Stylesheets  -->
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

    <!-- Our Website CSS Styles -->
    <link rel="stylesheet" href="css/icons.min.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link rel="stylesheet" href="css/responsive.css" type="text/css">

    <!-- Color Scheme -->
    <link rel="stylesheet" href="css/color-schemes/color.css" type="text/css" title="color3">
    <link rel="alternate stylesheet" href="css/color-schemes/color1.css" title="color1">
    <link rel="alternate stylesheet" href="css/color-schemes/color2.css" title="color2">
    <link rel="alternate stylesheet" href="css/color-schemes/color4.css" title="color4">
    <link rel="alternate stylesheet" href="css/color-schemes/color5.css" title="color5">
</head>
<body class="expand-data panel-data">
<div class="topbar">
  <div class="logo">
    <h1><a href="#" title=""><img src="images/logo1.png" alt="" /></a></h1>
  </div>
  <div class="topbar-data">
    <ul class="tobar-links">
      <li><a href="#" title=""><i class="ion-ios-bell"></i><span class="blue-bg">02</span></a>
        <div class="nti-drp-wrp">
          <h5 class="blue-bg"><span>You Have</span> 7 Notifications</h5>
          <div class="nti-lst">
            <div class="nti-usr">
              <span class="brd-rd50 rd-bg"><i class="fa fa-cog"></i></span>
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Sadi Orlaf</a></h5> <span class="pst-tm">Just Now</span>
                <i>Privacy settings changed</i>
              </div>
            </div>
            <div class="nti-usr">
              <span class="brd-rd50 drkblu-bg"><i class="ion-ios-personadd"></i></span>
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Katti Smith</a></h5> <span class="pst-tm">Just Now</span>
                <i>Mike has added you as friend</i>
              </div>
            </div>
            <div class="nti-usr">
              <span class="brd-rd50 orng-bg"><i class="ion-thumbsup"></i></span>
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Willimes Domson</a></h5> <span class="pst-tm">Just Now</span>
                <i>like your timeline photo</i>
              </div>
            </div>
            <div class="nti-usr">
              <span class="brd-rd50 grn-bg"><i class="ion-information-circled"></i></span>
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Holli Doe</a></h5> <span class="pst-tm">Just Now</span>
                <i>Curabitur id eros limes suscipit blandit.</i>
              </div>
            </div>
          </div>
          <div class="nt-ftr"><a href="#" title="">View All</a></div>
        </div>
      </li>
      <li><a href="#" title=""><i class="ion-android-drafts"></i><span class="green-bg">10</span></a>
        <div class="nti-drp-wrp">
          <h5 class="green-bg"><span>You Have</span> 7 New Messages</h5>
          <div class="nti-lst">
            <div class="nti-usr">
              <img class="brd-rd50" src="images/resource/acti-thmb2.jpg" alt="" />
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Sadi Orlaf</a></h5> <span class="pst-tm">Just Now</span>
                <i>Privacy settings changed</i>
              </div>
            </div>
            <div class="nti-usr">
              <img class="brd-rd50" src="images/resource/acti-thmb1.jpg" alt="" />
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Katti Smith</a></h5> <span class="pst-tm">Just Now</span>
                <i>Mike has added you as friend</i>
              </div>
            </div>
            <div class="nti-usr">
              <img class="brd-rd50" src="images/resource/acti-thmb3.jpg" alt="" />
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Willimes Domson</a></h5> <span class="pst-tm">Just Now</span>
                <i>like your timeline photo</i>
              </div>
            </div>
            <div class="nti-usr">
              <img class="brd-rd50" src="images/resource/acti-thmb4.jpg" alt="" />
              <div class="nti-usr-inr">
                <h5><a href="#" title="">Holli Doe</a></h5> <span class="pst-tm">Just Now</span>
                <i>Curabitur id eros limes suscipit blandit.</i>
              </div>
            </div>
          </div>
          <div class="nt-ftr"><a href="#" title="">View All</a></div>
        </div>
      </li>
      <li><a href="#" title=""><i class="ion-android-settings"></i></a>
        <div class="set-lst">
          <div class="set-bd">
            <h4>General Settings</h4>
            <ul class="sett-lst">
              <li>
                <span class="chck-bx">
                    <input id="set1" type="checkbox">
                    <label for="set1">Report Panel Usage</label>
                </span>
                <i>General Settings information</i>
              </li>
              <li>
                <span class="chck-bx">
                    <input id="set2" type="checkbox">
                    <label for="set2">Mail Redirect</label>
                </span>
                <i>General Settings information</i>
              </li>
              <li>
                <span class="chck-bx">
                    <input id="set3" type="checkbox">
                    <label for="set3">Expose Author Name</label>
                </span>
                <i>General Settings information</i>
              </li>
            </ul>
            <h4>Chat Settings</h4>
            <ul>              
              <li>
                <span class="chck-bx">
                    <input id="set4" type="checkbox">
                    <label for="set4">Show Me As Online</label>
                </span>
              </li>              
              <li>
                <span class="chck-bx">
                    <input id="set5" type="checkbox">
                    <label for="set5">Turn Off Notifications</label>
                </span>
              </li>
            </ul>
          </div>
          <div class="set-ft">
            <a class="btn-danger" href="#" title=""><i class="fa fa-trash"></i> Delete Chat History</a>
          </div>
        </div>
      </li>
      <li><a href="#" title=""><i class="ion-android-contacts"></i></a>
        <div class="cnt-lst">
          <ul>
            <li>
              <div class="usr">
                <img class="brd-rd50" src="images/resource/acti-thmb1.jpg" alt="" />
                <div class="usr-innr">
                  <h5><a href="#" title="">Smith Doe</a></h5>
                  <span>Co Worker</span>
                  <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                </div>
              </div>
            </li>
            <li>
              <div class="usr">
                <img class="brd-rd50" src="images/resource/acti-thmb2.jpg" alt="" />
                <div class="usr-innr">
                  <h5><a href="#" title="">Katti Smith</a></h5>
                  <span>Graphic Designer</span>
                  <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                </div>
              </div>
            </li>
            <li>
              <div class="usr">
                <img class="brd-rd50" src="images/resource/acti-thmb3.jpg" alt="" />
                <div class="usr-innr">
                  <h5><a href="#" title="">Willimes Domson</a></h5>
                  <span>Family Adviser</span>
                  <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                </div>
              </div>
            </li>
            <li>
              <div class="usr">
                <img class="brd-rd50" src="images/resource/acti-thmb4.jpg" alt="" />
                <div class="usr-innr">
                  <h5><a href="#" title="">Holli Doe</a></h5>
                  <span>Company CEO</span>
                  <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <form class="topbar-search">
      <button type="submit"><i class="ion-ios-search-strong"></i></button>
      <input type="text" placeholder="Type and Hit Enter" />
    </form>
    <div class="usr-act">
      <span><img src="images/resource/topbar-usr1.jpg" alt="" /><i class="sts away"></i></span>
      <div class="usr-inf">
        <div class="usr-thmb brd-rd50">
          <img class="brd-rd50" src="images/resource/usr.jpg" alt="" />
          <i class="sts away"></i>
          <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
        </div>
        <h5><a href="#" title="">John Smith</a></h5>
        <span>Co Worker</span>
        <i>076 9477 4896</i>
        <div class="act-pst-lk-stm">
          <a class="brd-rd5 green-bg-hover" href="#" title=""><i class="ion-heart"></i> Love</a>
          <a class="brd-rd5 blue-bg-hover" href="#" title=""><i class="ion-forward"></i> Reply</a>
        </div>
        <div class="usr-ft">
          <a class="btn-danger" href="#" title=""><i class="fa fa-sign-out"></i> Logout</a>
        </div>
      </div>
    </div>
  </div>
  <div class="topbar-bottom-colors">
    <i style="background-color: #2c3e50;"></i>
    <i style="background-color: #9857b2;"></i>
    <i style="background-color: #2c81ba;"></i>
    <i style="background-color: #5dc12e;"></i>
    <i style="background-color: #feb506;"></i>
    <i style="background-color: #e17c21;"></i>
    <i style="background-color: #bc382a;"></i>
  </div>
</div><!-- Topbar -->

<header class="side-header light-skin expand-header">
  <div class="nav-head">Main Navigation <span class="menu-trigger"><i class="ion-android-menu"></i></span></div>
  <nav class="custom-scrollbar">
    <ul class="drp-sec">
      <li class="has-drp"><a href="#" title=""><i class="ion-home"></i> <span>Dashboard</span></a>
        <ul class="sb-drp">
          <li><a href="index.html" title="">Dashboard 1</a></li>
          <li><a href="dashboard2.html" title="">Dashboard 2</a></li>
          <li><a href="dashboard3.html" title="">Dashboard 3</a></li>
        </ul>
      </li>
    </ul>
    <h4>Features</h4>
    <ul class="drp-sec">
      <li class="has-drp"><a href="#" title=""><i class="ion-briefcase"></i> <span>UI Elements</span></a>
        <ul class="sb-drp">
          <li><a href="pricing-plan.html" title="">Pricing Plan</a></li>
          <li><a href="grids.html" title="">Grids</a></li>
          <li><a href="calendar.html" title="">Calendar</a></li>
          <li><a href="pagination.html" title="">Pagination</a></li>
          <li><a href="buttons.html" title="">Button Styles</a></li>
          <li><a href="dropdowns.html" title="">Dropdown Styles</a></li>
          <li><a href="tabs&accordians.html" title="">Tabs & Accordians</a></li>
          <li><a href="progressbars.html" title="">Progress Bars</a></li>
          <li><a href="tooltips.html" title="">Tooltips</a></li>
          <li><a href="popovers.html" title="">Popovers</a></li>
          <li><a href="alerts.html" title="">Alerts</a></li>
          <li><a href="list-group.html" title="">List Group</a></li>
          <li><a href="models.html" title="">Models</a></li>
          <li><a href="loaders.html" title="">CSS Loaders</a></li>
          <li><a href="cards.html" title="">Cards</a></li>
          <li><a href="range-slider.html" title="">Range Slider</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>Icons</span></a>
        <ul class="sb-drp">
          <li><a href="font-awesome-icons.html" title="">Font Awesome Icons</a></li>
          <li><a href="themify-icons.html" title="">Themify Icons</a></li>
          <li><a href="ionicons.html" title="">Ionicons</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-images"></i> <span>Gallery Styles</span></a>
        <ul class="sb-drp">
          <li><a href="gallery1.html" title="">Gallery Style 1</a></li>
          <li><a href="gallery2.html" title="">Gallery Style 2</a></li>
          <li><a href="gallery3.html" title="">Gallery Style 3</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-android-settings"></i> <span>Form Stuff</span></a>
        <ul class="sb-drp">
          <li><a href="form-layouts.html" title="">Form Layouts</a></li>
          <li><a href="form-wizard.html" title="">Form Wizard</a></li>
        </ul>
      </li>
      <li><a href="tables.html" title=""><i class="ion-crop"></i> Tables</a></li>
      <li><a href="charts.html" title=""><i class="ion-podium"></i> Charts</a></li>
    </ul>
    <h4>Pages</h4>
    <ul class="drp-sec">
      <li class="has-drp"><a href="#" title=""><i class="ion-android-clipboard"></i> <span>General</span></a>
        <ul class="sb-drp">
          <li><a href="404.html" title="">404</a></li>
          <li><a href="505.html" title="">505</a></li>
          <li><a href="contact.html" title="">Contact Us</a></li>
          <li><a href="coming-soon.html" title="">Coming Soon</a></li>
          <li><a href="under-maintenance.html" title="">User Maintenance</a></li>
          <li><a href="login.html" title="">Login</a></li>
          <li><a href="register.html" title="">Register</a></li>
          <li><a href="search-result.html" title="">Search Result</a></li>
          <li><a href="faq.html" title="">Faq's</a></li>
          <li><a href="services.html" title="">Services</a></li>
          <li><a href="invoice.html" title="">Invoice Page</a></li>
          <li><a href="typography.html" title="">Typography</a></li>
          <li><a href="live-chat.html" title="">Live Chat</a></li>
          <li><a href="timeline.html" title="">Timeline</a></li>
          <li><a href="cropbox.html" title="">Cropbox</a></li>
          <li><a href="calculator.html" title="">Calculator</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-android-contact"></i> <span>User</span></a>
        <ul class="sb-drp">
          <li><a href="profile.html" title="">Profile Page</a></li>
          <li><a href="profile-edit.html" title="">Profile Edit</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-bag"></i> <span>eCommerce</span></a>
        <ul class="sb-drp">
          <li><a href="products.html" title="">Products</a></li>
          <li><a href="product-details.html" title="">Product Details</a></li>
          <li><a href="checkout.html" title="">Checkout</a></li>
          <li><a href="order-received.html" title="">Order Received</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-android-map"></i> <span>Maps</span></a>
        <ul class="sb-drp">
          <li><a href="google-map.html" title="">Google Map</a></li>
          <li><a href="vector-map.html" title="">Vector map</a></li>
        </ul>
      </li>
      <li class="has-drp"><a href="#" title=""><i class="ion-email"></i> <span>Email's</span></a>
        <ul class="sb-drp">
          <li><a href="email-composer.html" title="">Email Compose</a></li>
          <li><a href="inbox.html" title="">Inbox</a></li>
          <li><a href="email.html" title="">Email</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header><!-- Side Header -->

<div class="option-panel">
  <span class="panel-btn"><i class="fa ion-android-settings fa-spin"></i></span>
  <div class="color-panel">
    <h4>Text Color</h4>
    <span class="color1" onclick="setActiveStyleSheet('color1'); return false;"><i></i></span>
    <span class="color2" onclick="setActiveStyleSheet('color2'); return false;"><i></i></span>
    <span class="color3" onclick="setActiveStyleSheet('color'); return false;"><i></i></span>
    <span class="color4" onclick="setActiveStyleSheet('color4'); return false;"><i></i></span>
    <span class="color5" onclick="setActiveStyleSheet('color5'); return false;"><i></i></span>
  </div>
</div><!-- Options Panel -->
<div class="pg-tp">
    <i class="ion-cube"></i>
    <div class="pr-tp-inr">
        <h4>Welcome to <strong>ZAWYA</strong><span></span> Panel</h4>
        <span>Admin Template for medium and large web applications with ery clean and aesthetic style.</span>
    </div>
</div><!-- Page Top -->

<div class="panel-content">
    <div class="filter-items">
        <div class="row grid-wrap mrg20">
            <div class="col-md-6 grid-item col-sm-12 col-lg-6">
                <div class="widget sales-summ pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <h4 class="widget-title">Site Visits</h4>
                    <div class="sales-charts">
                        <ul class="nav nav-tabs">
                            <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#new">New</a></li>
                            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#returning">Returning</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="new">
                                <div id="chrt2" style="height: 270px;"></div>
                            </div>
                            <div class="tab-pane fade" id="returning">
                                <div id="chrt3" style="height: 270px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 grid-item col-sm-12 col-lg-6">
                <div class="widget sales-summ pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <h4 class="widget-title">Sales</h4>
                    <div id="chrt4" style="height: 270px;"></div>
                </div>
            </div>
            <div class="col-md-12 grid-item col-sm-12 col-lg-12">
                <div class="widget tsk-prgs pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="tsk-prg-wrp">
                        <div class="row">
                            <div class="col-md-7 col-sm-12 col-lg-8">
                                <div class="tsk-prg-chrt-wrp">
                                    <h4 class="widget-title">Task Progress</h4>
                                    <div class="tsk-prt">
                                        <div class="prt-bx">
                                            <div class="prt-bx-inf">
                                                <h4>07</h4>
                                                <span>Urgent Tasks</span>
                                            </div>
                                            <i class="ion-social-buffer blue-clr"></i>                            
                                        </div>
                                        <div class="prt-bx">
                                            <div class="prt-bx-inf">
                                                <h4>05</h4>
                                                <span>Normal Tasks</span>
                                            </div>
                                            <i class="ion-ios-color-filter green-clr"></i>                            
                                        </div>
                                    </div>
                                    <div id="chart5" style="height: 250px;"></div>
                                </div>
                            </div>
                            <div class="col-md-5 col-sm-12 col-lg-4">
                                <div class="asd-dvlpr">
                                    <h4 class="widget-title">Assigned To <i class="blue-clr">(05)</i></h4>
                                    <div class="dvlprs-lst">
                                        <div class="dvplr-bx">
                                            <img class="brd-rd50" src="images/resource/acti-thmb1.jpg" alt="" />
                                            <div class="dvplr-inf">
                                                <h4><a href="#" title="">Sadi Orlaf</a></h4>
                                                <span>Web Developer</span>
                                            </div>
                                        </div>
                                        <div class="dvplr-bx">
                                            <img class="brd-rd50" src="images/resource/acti-thmb2.jpg" alt="" />
                                            <div class="dvplr-inf">
                                                <h4><a href="#" title="">Overtunk</a></h4>
                                                <span>Frontend Developer</span>
                                            </div>
                                        </div>
                                        <div class="dvplr-bx">
                                            <img class="brd-rd50" src="images/resource/acti-thmb3.jpg" alt="" />
                                            <div class="dvplr-inf">
                                                <h4><a href="#" title="">Chris Johnathan</a></h4>
                                                <span>Designer</span>
                                            </div>
                                        </div>
                                        <div class="dvplr-bx">
                                            <img class="brd-rd50" src="images/resource/acti-thmb4.jpg" alt="" />
                                            <div class="dvplr-inf">
                                                <h4><a href="#" title="">Kim Smith</a></h4>
                                                <span>Web Coder</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- Task Progress Wrap -->
                </div>
            </div>
            <div class="col-md-4 grid-item col-sm-4 col-lg-4">
                <div class="widget sbcrb-itm pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <i class="ion-email blue-clr"></i>
                    <h4>9.25k Subscribers</h4>
                    <span>Your main list is growing!</span>
                    <a href="#" title=""><i class="ion-gear-b"></i> Manage List</a>
                </div>
            </div>
            <div class="col-md-4 grid-item col-sm-4 col-lg-4">
                <div class="widget sbcrb-itm pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <i class="ion-social-twitter blue-clr"></i>
                    <h4>690+ Followers</h4>
                    <span>You are doing great!</span>
                    <a href="#" title=""><i class="ion-android-people"></i> Check Them Out</a>
                </div>
            </div>
            <div class="col-md-4 grid-item col-sm-4 col-lg-4">
                <div class="widget sbcrb-itm pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <i class="ion-android-upload blue-clr"></i>
                    <h4>Business Plan</h4>
                    <span>This is your current active plan.</span>
                    <a href="#" title=""><i class="ion-arrow-up-a"></i> Upgrade To VIP</a>
                </div>
            </div>
            <div class="col-md-6 grid-item col-sm-12 col-lg-6">
                <div class="widget to-do-lst pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <h4 class="widget-title">To Do list <a class="blue-bg brd-rd5 add-tsk-btn" href="#" title="">Add Task</a></h4>
                    <div class="to-do-wrp">
                        <div class="to-do-tp">
                            <div class="add-tsk">
                                <form class="brd-rd5">
                                    <input type="text" placeholder="Add Your Task Here..." />
                                    <button class="blue-bg" type="submit"><i class="ion-forward"></i></button>
                                </form>
                            </div>
                        </div>
                        <ul class="td-lst">
                            <li>
                                <h5>Book Flight For Holiday</h5>
                                <span><i class="ion-ios-stopwatch"></i>27 July 2017</span>
                                <a href="#" title=""><i class="ion-android-delete"></i></a>
                            </li>
                            <li>
                                <h5>Send Payment Today</h5>
                                <span><i class="ion-ios-stopwatch"></i>25 July 2017</span>
                                <a href="#" title=""><i class="ion-android-delete"></i></a>
                            </li>
                            <li>
                                <h5>Forward All Tacks</h5>
                                <span><i class="ion-ios-stopwatch"></i>10 July 2017</span>
                                <a href="#" title=""><i class="ion-android-delete"></i></a>
                            </li>
                            <li>
                                <h5>Give Purchase Report Today</h5>
                                <span><i class="ion-ios-stopwatch"></i>27 July 2017</span>
                                <a href="#" title=""><i class="ion-android-delete"></i></a>
                            </li>
                            <li>
                                <h5>Recieve Payment By Jhon</h5>
                                <span><i class="ion-ios-stopwatch"></i>14 July 2017</span>
                                <a href="#" title=""><i class="ion-android-delete"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-6 grid-item col-sm-12 col-lg-6">
                <div class="widget recnt-comts pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <h4 class="widget-title">Recent Comments</h4>
                    <ul class="rcnt-cmts">
                        <li>
                            <div class="rcnt-cmt-itm">
                                <img class="brd-rd50" src="images/resource/acti-thmb1.jpg" alt="" />
                                <div class="rcnt-cmt-inf">
                                    <h5><a href="#" title="">Daniel Kristen</a></h5> <i class="spnd-tm">1 min ago</i>
                                    <p>Aenean massa. Cum sociis natoque penatibus et mag nis dis parturient montes mus.</p>
                                    <div class="act-pst-lk-stm">
                                        <a class="brd-rd5 green-bg-hover" href="#" title=""><i class="ion-heart"></i> Love</a>
                                        <a class="brd-rd5 blue-bg-hover" href="#" title=""><i class="ion-forward"></i> Reply</a>
                                    </div>
                                </div>
                            </div>
                            <ul class="sb-cmts">
                                <li>
                                    <div class="rcnt-cmt-itm">
                                        <img class="brd-rd50" src="images/resource/acti-thmb2.jpg" alt="" />
                                        <div class="rcnt-cmt-inf">
                                            <h5><a href="#" title="">Richa Stone</a></h5> <i class="spnd-tm">3 sec ago</i>
                                            <p>Aenean massa. Cum sociis natoque penati nis dis parturient montes.</p>
                                            <div class="act-pst-lk-stm">
                                                <a class="brd-rd5 green-bg-hover" href="#" title=""><i class="ion-heart"></i> Love</a>
                                                <a class="brd-rd5 blue-bg-hover" href="#" title=""><i class="ion-forward"></i> Reply</a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <form class="wrt-cmt brd-rd5">
                        <i class="ion-android-camera blue-clr"></i>
                        <input type="text" placeholder="Write Your Comment Here" />
                    </form>
                </div>
            </div>
            <div class="col-md-4 grid-item col-sm-6 col-lg-4">
                <div class="widget flw-usr pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="flw-usr-wrp">
                        <span class="flw-usr-bg" style="background-image: url(images/flw-usr-bg.jpg);"></span>
                        <img class="brd-rd50" src="images/resource/flw-usr.jpg" alt="" />
                        <div class="flw-usr-inf">
                            <h4>Micheal Doe</h4>
                            <span class="blue-clr">Project Manager</span>
                            <p>Aenean massa. Cum sociis natque pe natibus et magnis dis parturint mont es, nascetur ridiculus mus.</p>
                            <a class="brd-rd5 blue-bg" href="#" title="">Follow Me</a>
                        </div>
                        <div class="usr-flwrs">
                            <div class="usr-flwr-itm">
                                <span class="blue-clr"><i class="counter">760</i></span>
                                <i>Articles</i>
                            </div>
                            <div class="usr-flwr-itm">
                                <span class="blue-clr"><i class="counter">19,291</i></span>
                                <i>Followers</i>
                            </div>
                            <div class="usr-flwr-itm">
                                <span class="blue-clr"><i class="counter">5421</i></span>
                                <i>Following</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 grid-item col-sm-6 col-lg-4">
                <div class="widget usr-msgs pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <h4 class="widget-title">Message</h4>
                    <div class="msgs-lst">
                        <div class="msg-itm">
                            <span class="brd-rd50" style="background-color: #26c6da;color: #ffffff;">S <i class="sts away"></i></span>
                            <div class="msg-inf">
                                <h5>Sunil Joshi -</h5> <span class="pst-tm">12:00pm</span>
                                <div class="msg">
                                    <p>That's awesome!</p>
                                </div>
                            </div>
                        </div>
                        <div class="msg-itm">
                            <span class="brd-rd50" style="background-color: #26c6da;color: #ffffff;"><img class="brd-rd50" src="images/resource/acti-thmb2.jpg" alt="" /> <i class="sts online"></i></span>
                            <div class="msg-inf">
                                <h5>Bvesh Patel -</h5> <span class="pst-tm">01:00am</span>
                                <div class="msg">
                                    <p>That's awesome!</p>
                                </div>
                            </div>
                        </div>
                        <div class="msg-itm">
                            <span class="brd-rd50" style="background-color: #26c6da;color: #ffffff;">N <i class="sts dont-dstrb"></i></span>
                            <div class="msg-inf">
                                <h5>Nirva Joshi -</h5> <span class="pst-tm">08:40pm</span>
                                <div class="msg">
                                    <p>That's awesome!</p>
                                </div>
                            </div>
                        </div>
                        <div class="msg-itm">
                            <span class="brd-rd50" style="background-color: #26c6da;color: #ffffff;">J <i class="sts online"></i></span>
                            <div class="msg-inf">
                                <h5>Jonathan -</h5> <span class="pst-tm">12:00pm</span>
                                <div class="msg">
                                    <p>That's awesome!</p>
                                </div>
                            </div>
                        </div>
                        <div class="vw-mr"><a href="#" title="">View More</a></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 grid-item col-sm-6 col-lg-4">
                <div class="widget upld-spd pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="upld-inr">
                        <i class="ion-android-upload blue-clr"></i>
                        <h4>Uploading Speed</h4>
                        <span>Your current Uploading Speed</span>
                    </div>
                    <div id="circl-prg"></div>
                    <div class="upld-inf">
                        <h5>Uploading</h5>
                        <span class="blue-clr">my_photo.png</span>
                    </div>
                    <span class="upld-sped"><i class="ion-arrow-up-a"></i> Speed: <span class="blue-clr">450 kbps</span></span>
                </div>
            </div>
            <div class="col-md-12 grid-item col-sm-12 col-lg-12">
                <div class="widget calndr-wdgt pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <h4 class="widget-title">Calendar</h4>
                    <div class="calndr-wrp">
                        <a class="blue-bg brd-rd5" href="#" title="">Add Event</a>
                        <span class="slct-bx">
                            <i class="ion-android-funnel"></i>
                            <span>
                                <select>
                                    <option>Monthly</option>
                                    <option>Yearly</option>
                                    <option>Weekly</option>
                                </select>
                            </span>
                        </span>
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>
        </div><!-- Filter Items -->
    </div>
</div><!-- Panel Content -->
<footer>
  <p>Copyright <a href="http://www.bootstrapmb.com" title="">Example Company</a> &amp; 2017 - 2018</p>
  <span>10GB of 250GB Free.</span>
</footer>


<!-- Vendor: Javascripts -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<!-- Vendor: Followed by our custom Javascripts -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/select2.min.js" type="text/javascript"></script>
<script src="js/slick.min.js" type="text/javascript"></script>

<!-- Our Website Javascripts -->
<script src="js/isotope.min.js" type="text/javascript"></script>
<script src="js/isotope-int.js" type="text/javascript"></script>
<script src="js/jquery.counterup.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/exporting.js" type="text/javascript"></script>
<script src="js/highcharts-more.js" type="text/javascript"></script>
<script src="js/moment.min.js" type="text/javascript"></script>
<script src="js/jquery.circliful.min.js" type="text/javascript"></script>
<script src="js/fullcalendar.min.js" type="text/javascript"></script>
<script src="js/jquery.downCount.js" type="text/javascript"></script>
<script src="js/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>
<script src="js/jquery.formtowizard.js" type="text/javascript"></script>
<script src="js/form-validator.min.js" type="text/javascript"></script>
<script src="js/form-validator-lang-en.min.js" type="text/javascript"></script>
<script src="js/cropbox-min.js" type="text/javascript"></script>
<script src="js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="js/ion.rangeSlider.min.js" type="text/javascript"></script>
<script src="js/jquery.poptrox.min.js" type="text/javascript"></script>
<script src="js/styleswitcher.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    'use strict';

    Highcharts.chart('chrt2', {
        colors: ['#e8e9ec','#5be1ba'],
        chart: {
            type: 'area',
            backgroundColor: "#FFFFFF",
            borderColor: "#335cad"
        },
        legend: {
            enabled: false
        },
        title: {
            style: {
                    display: 'none'
                }
        },
        xAxis: {
            categories: ['1', '2', '3', '4', '5', '6', '7']
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
        },      
        plotOptions: {
            area: {
                categories: ['1', '2', '3', '4', '5', '6', '7'],
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            data: [18,45,35,10,85,25,90]
        }, {
            data: [45,50,25,85,55,65,70]
        }]
    });

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        $('#chrt3').highcharts({
            colors: ['#e8e9ec','#5be1ba'],
            chart: {
                type: 'area',
                backgroundColor: "#FFFFFF",
                borderColor: "#335cad"
            },
            legend: {
                enabled: false
            },
            title: {
                style: {
                    display: 'none'
                }
            },
            xAxis: {
                categories: ['1', '2', '3', '4', '5', '6', '7']
            },
            credits: {
                enabled: false
            },
            tooltip: {
                pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
            },      
            plotOptions: {
                area: {
                    categories: ['1', '2', '3', '4', '5', '6', '7'],
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            },
            series: [{
                data: [18,45,35,10,85,25,90]
            }, {
                data: [45,50,25,85,55,65,70]
            }]
        });
    });

    Highcharts.chart('chrt4', {
        colors: ['#808e9e','#7ab4ec'],
        chart: {
            type: 'area',
            backgroundColor: "#FFFFFF",
            borderColor: "#335cad"
        },
        legend: {
            enabled: false
        },
        title: {
            style: {
                    display: 'none'
                }
        },
        xAxis: {
            categories: ['1', '2', '3', '4', '5', '6', '7']
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
        },
        legend: {
          align: 'right',
          verticalAlign: 'top',
          itemStyle: {
            color: '#555555',
            fontSize: '13px',
            fontWeight: '300'
          },
       },      
        plotOptions: {
            area: {
                categories: ['1', '2', '3', '4', '5', '6', '7'],
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            data: [18,45,35,10,85,25,90]
        }, {
            data: [45,50,25,85,55,65,70]
        }]
    });

    Highcharts.chart('chart5', {
        chart: {
            type: 'column'
        },
        title: {
            text: null
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: null
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
            shared: true
        },
        plotOptions: {
            column: {
                stacking: 'percent'
            }
        },
        series: [{
            name: 'Service 1',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Service 2',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Service 3',
            data: [3, 4, 4, 2, 5]
        }]
    });


    //===== To DO List Add Task Field =====//
    $('.add-tsk-btn').on('click', function(){
        $('div.add-tsk').slideToggle();
        return false;
    });

    //===== To Do List =====//
    $('.td-lst > li').on('click', function () {
        $(this).toggleClass('completed');
        return false;
    });

    //===== To Do List Deleted =====//
    $('.td-lst > li > a').on('click', function () {
        $(this).parent('li').slideUp();
        return false;
    });

    $('.add-tsk form > button').on('click', function () {
        var task_list = $('ul.td-lst');
        var task_item = $('.add-tsk form > input').val();
        var date = new Date();
        var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
        "Aug","Sep","Oct","Nov","Dec"];
        var current_date = date.getDate()+' '+months[date.getMonth()]+' '+date.getFullYear();
        if (task_item !== '' && task_item !== 'undefined') {
            $(task_list).prepend('<li><h5>' + task_item + '</h5> <span><i class="ion-ios-stopwatch"></i>' + current_date + '</span> <a href="#" title=""><i class="ion-android-delete"></i></a></li>');
            $('.td-lst > li').on("click", function () {
                $(this).toggleClass('active');
            });
            $('.add-tsk form > input').addClass('null');
            $('.add-tsk form > input').val('');
            $('.add-tsk form > input').focus();
            var attribute = $("ul.td-lst").children('li').eq(0).children('i');
            return false;
        }
    });

    //===== Circliful =====//
    if ($.isFunction($.fn.circliful)) {
        $('#circl-prg').circliful({
            animation: 1,
            animationStep: 3,
            foregroundBorderWidth: 5,
            backgroundBorderWidth: 5,
            percent: 66,
            textSize: 35,
            foregroundColor: '#50b8aa',
            backgroundColor: "#96d5f7",
            textStyle: 'font-size: 20px;',
            textColor: '#555555',
        });
    }

    //===== Full Calendar =====//
    if ($.isFunction($.fn.fullCalendar)) {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev',
                center: 'title',
                right: 'next'
            },
            height: 530,
            defaultDate: '2017-09-12',
            editable: true,
            eventLimit: true,
            events: [
                {
                    title: 'Long Event...',
                    start: '2017-09-04'
                },
                {
                    title: 'Repeating Event',
                    start: '2017-09-09',
                    end: '2017-09-10'
                },
                {
                    title: 'Word Show...',
                    start: '2017-09-21'
                }
            ]
        });
    }

    $('.grid-item').draggable();
});
</script>
</body>
</html>